<template>
  <div style="width: 100%;">
    <el-button
      type="primary"
      size="mini"
      @click="getTableData"
      icon="el-icon-video-play"
      style="margin-bottom: 5px">执行SQL</el-button>
    <el-input
      type="textarea"
      :rows="5"
      v-model="sql"
      style="width: 100%">
    </el-input>

    <div style="line-height: 30px">
      <span v-if="row !== undefined">影响行数:{{row}}</span>
      <el-table v-loading="tableDataLoading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                :data="tableData"
                v-if="tableData.length != 0"
                height="300"
                border
                style="width: 100%">
        <el-table-column v-for="obj in tableColumns" :prop="obj" :label="obj">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import * as databaseApi from '@/api/datax-databaseManage'
import * as dsQueryApi from '@/api/metadata-query'

export default {
  name: "content",
  props: ['datasourceId'],
  data() {
    return {
      sql: undefined,
      tableData: [],
      tableDataLoading: false,
      row: undefined,
      tableColumns: []
    }
  },
  methods: {
    getTableData() {
      if (!this.datasourceId || !this.sql) {
        this.$message.warning("请规范使用")
        return
      }

      this.tableDataLoading = true
      const obj = {
        datasourceId: this.datasourceId,
        querySql:this.sql
      }
      // dsQueryApi.getColumnsByQuerySql(obj).then(response => {
      //   this.tableColumns = response
      // })

      this.tableData = []
      this.tableColumns = []
      databaseApi.executeSQL(obj).then((response) => {
        if (this.sql.startsWith("SELECT") || this.sql.startsWith("select") ||
            this.sql.startsWith("show") || this.sql.startsWith("SHOW")) {
            this.tableColumns = response[0]
            this.tableData = response[1]
            this.tableDataLoading = false
        }else {
          this.row = response[1][0].row
          this.tableDataLoading = false
        }
      }).catch((error)=>{
          this.tableData = []
          this.tableDataLoading = false
      })
    },
  }
}
</script>

<style scoped>

</style>
